<!-- 订单管理 -->
<template>
  <div
    style="padding: 20px;"
    class="dashboard-container order-list customer-list-box"
  >
    <el-card
      style="margin-top:10px;"
      class="box-card"
    >
      <div
        class="text item"
      >

        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
        >
          <el-row>
            <el-col
              :span="6"
              style="width: 340px"
            >
              <el-form-item
                label="订单编号"
                prop="id"
              >
                <el-input
                  v-model="ruleForm.id"
                  placeholder="请输入订单编号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col
              :span="6"
              style="width: 340px;"
            >
              <el-form-item
                label="订单状态"
                prop="status"
              >
                <el-select
                  v-model="ruleForm.value"
                  style="height: 40px;"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in status"
                    :key="item.id"
                    :label="item.label"
                    :value="item.name"
                  > </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col
              :span="6"
              style="width: 340px;"
            >
              <el-form-item
                label="付费状态"
                prop="paymentStatus"
              >
                <el-select
                  v-model="ruleForm.payValue"
                  style="height: 40px;"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in paystatus"
                    :key="item.id"
                    :label="item.label"
                    :value="item.name"
                  > </el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col
              :span="6"
              style="width: 340px"
            >
              <el-form-item
                label="发件人姓名"
                prop="senderName"
              >
                <el-input
                  v-model="ruleForm.senderName"
                  placeholder="请输入发件人姓名"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col
              :span="6"
              style="width: 340px"
            >
              <el-form-item
                prop="senderPhone"
                label="发件人电话"
              >
                <el-input
                  v-model="ruleForm.senderPhone"
                  placeholder="请输入发件人电话"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col
              :span="6"
              style="width: 355px;"
            >
              <el-form-item label="发件人地址">
                <el-select
                  v-model="ruleForm.senderProvinceId"
                  style="height: 40px;width: 28%;margin: 2%;"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in Sprovinces "
                    :key="item.areaId"
                    :label="item.areaName"
                    :value="item.areaId"
                  > </el-option>
                </el-select>
                <el-select
                  v-model="ruleForm.senderCityId"
                  style="height: 40px;width: 28%;margin: 2%;"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in Scitys"
                    :key="item.areaId"
                    :label="item.areaName"
                    :value="item.areaId"
                  > </el-option>
                </el-select>
                <el-select
                  v-model="ruleForm.senderCountyId"
                  style="height: 40px;width: 28%"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in Sareas"
                    :key="item.areaId"
                    :label="item.areaName"
                    :value="item.areaId"
                  > </el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col
              :span="6"
              style="width: 340px"
            >
              <el-form-item
                label="收件人姓名"
                prop="receiverName"
              >
                <el-input
                  v-model="ruleForm.receiverName"
                  placeholder="请输入收件人姓名"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col
              :span="6"
              style="width: 340px"
            >
              <el-form-item
                label="收件人电话"
                prop="receiverPhone"
              >
                <el-input
                  v-model="ruleForm.receiverPhone"
                  placeholder="请输入收件人电话"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col
              :span="6"
              style="width: 355px;"
            >
              <el-form-item label="收件人地址">
                <el-select
                  v-model="ruleForm.receiverProvinceId"
                  style="height: 40px;width: 28%;margin: 2%;"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in Rprovinces"
                    :key="item.areaId"
                    :label="item.areaName"
                    :value="item.areaId"
                  > </el-option>
                </el-select>
                <el-select
                  v-model="ruleForm.receiverCityId"
                  style="height: 40px;width: 28%;margin: 2%;"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in Rcitys"
                    :key="item.areaId"
                    :label="item.areaName"
                    :value="item.areaId"
                  > </el-option>
                </el-select>
                <el-select
                  v-model="ruleForm.receiverCountyId"
                  style="height: 40px;width: 28%"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in Rareas"
                    :key="item.areaId"
                    :label="item.areaName"
                    :value="item.areaId"
                  > </el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col>
              <el-button
                style="background: #e15536;"
                @click="search"
              ><span style="color: #fff;">搜索</span></el-button>
              <el-button @click="reset">重置</el-button>
            </el-col>

          </el-row>
        </el-form>

      </div>
    </el-card>
    <el-card
      style="margin-top:10px;"
      class="box-card"
    >
      <div>
        <!-- 表格 -->
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            width="120"
          > </el-table-column>
          <el-table-column
            width="180"
            prop="id"
            label="订单编号"
          >
          </el-table-column>
          <el-table-column
            width="180"
            prop="transportOrder.id"
            label="运单编号"
          > </el-table-column>
          <el-table-column
            width="160"
            prop="createTime"
            label="下单时间"
          >

          </el-table-column>
          <el-table-column
            width="120"
            prop="status"
            label="订单状态"
          >
            <template v-slot="{row}">
              {{ row.status===23000?'待取件':row.status===23001?'已取件':row.status===23005 ?'运输中':row.status===23008?'派送中':row.status===23009?'已签收':row.status===23010?'拒收':row.status===230011?'已取消':'全部' }}
            </template>
          </el-table-column>
          <el-table-column
            width="140"
            prop="senderName"
            label="发件人姓名"
          >
          </el-table-column>
          <el-table-column
            width="180"
            prop="senderPhone"
            label="发件人电话"
          > </el-table-column>
          <el-table-column
            prop="senderAddress"
            width="200"
            label="发件人地址"
          > </el-table-column>
          <el-table-column
            prop="receiverName"
            width="140"
            label="收件人姓名"
          > </el-table-column>
          <el-table-column
            prop="receiverPhone"
            width="180"
            label="收件人电话"
          > </el-table-column>
          <el-table-column
            prop="receiverAddress"
            width="200"
            label="收件人地址"
          > </el-table-column>
          <el-table-column
            prop="pickupType"
            width="120"
            label="取件类型"
          >
            <template v-slot="{row}">
              {{ row.pickupType===1?'网点自寄':'上门取件' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="paymentMethod"
            width="120"
            label="付费类型"
          >
            <template v-slot="{row}">
              {{ row.paymentMethod===1?'预结':'到付' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="paymentStatus"
            width="120"
            label="付费状态"
          >
            <template v-slot="{row}">
              {{ row.paymentStatus ===1?'未付':'已付' }}
            </template> </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="110"
            style="text-align: center;"
          >
            <template v-slot="{row}">
              <el-col
                :span="6"
              >
                <el-button
                  type="text"
                  @click="jump(row)"
                ><span>订单详情</span></el-button>
              </el-col>

            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row
          type="flex"
          justify="end"
          style="height: 60px"
          align="middle"
        >
          <el-pagination
            :current-page="params.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="params.pageSize"
            layout="total,prev, pager, next,sizes,jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>

        </el-row>
      </div>

    </el-card>
  </div>

</template>
<script>
import city from '@/api/city'

import { orderList } from '@/api/order'

export default {
  data() {
    return {
      tableData: [],
      current: 1,
      total: 0,
      params: {
        page: 1, // 当前的页码数
        pageSize: 10 // 每页展示多少条数

      },
      status: [
        {
          'id': 23000,
          'name': '待取件'
        },
        {
          'id': 23001,
          'name': '已取件'
        },
        {
          'id': 23005,
          'name': '运输中'
        },
        {
          'id': 23008,
          'name': '派送中'
        },
        {
          'id': 23009,
          'name': '已签收'
        },
        {
          'id': 23010,
          'name': '拒收'
        },
        {
          'id': 230011,
          'name': '已取消'
        },
        {
          'id': 0,
          'name': '全部'
        }
      ],

      paystatus: [{
        id: '选项1',
        name: '已付'
      }, {
        id: '选项2',
        name: '未付'
      }],

      // // 表单验证
      ruleForm: {
        value: '',
        payValue: '',
        id: '',
        senderName: '',
        senderPhone: '',
        receiverPhone: '',
        receiverName: '',
        paymentStatus: null, // 付费状态
        status: null, // 订单状态
        senderAddress: null, // 发件人详细地址
        senderProvinceId: null, // 发件人省份id
        senderCityId: null, // 发件人城市id
        senderCountyId: null, // 发件人区域id
        receiverAddress: null, // 收件人详细地址
        receiverProvinceId: null, // 收件人省份id
        receiverCityId: null, // 收件人城市id
        receiverCountyId: null // 收件人区域id
      },
      Sprovinces: [], // 发件人省市区
      Scitys: [],
      Sareas: [],
      Rprovinces: [], // 取件人省市区
      Rcitys: [],
      Rareas: [],
      orderstatus: [] // 订单状态
    }
  },
  watch: {
    // 侦听发件人省份的变化
    'ruleForm.senderProvinceId'() {
      // 变化之后从所有数据中筛选与省份id对应的数据
      const data = this.Sprovinces.find(item => {
        // 用选中的id与数组中每项的id进行比较，符合条件返回该对象
        return item.areaId === this.ruleForm.senderProvinceId
      })
      // 将该对象里的城市数据赋值给发件人的城市列表
      this.Scitys = data.cities
      // 下面的是如果改变了省份，城市和地区先清空
      this.ruleForm.senderCityId = null
      this.ruleForm.senderCountyId = null
    },
    // 侦听发件人城市的变化
    /* 这里因为判断是选择省份之后，城市id清空，也会侦听到城市id的变化，会进行比较，
         因为id是null，所以返回的对象是空的， 在赋值的时候不判断会报错
      */
    'ruleForm.senderCityId'() {
      // 变化之后从所有数据中筛选与城市id对应的数据
      const data = this.Scitys.find(item => {
        // 用选中的id与数组中每项的id进行比较，符合条件返回该对象
        return item.areaId === this.ruleForm.senderCityId
      })
      // 将该对象里的地区数据赋值给发件人的地区列表
      this.Sareas = data ? data.counties : []
      // 如果改变了城市，地区先清空
      this.ruleForm.senderCountyId = null
    },
    'ruleForm.receiverProvinceId'() {
      const data = this.Rprovinces.find(item => {
        return item.areaId === this.ruleForm.receiverProvinceId
      })
      // console.log(data)
      this.Rcitys = data.cities
      this.ruleForm.receiverCityId = null
      this.ruleForm.receiverCountyId = null
    },
    'ruleForm.receiverCityId'() {
      if (this.ruleForm.receiverCityId) {
        const data = this.Rcitys.find(item => {
          return item.areaId === this.ruleForm.receiverCityId
        })
        // console.log(data)
        this.ruleForm.receiverCountyId = null
        this.Rareas = data.counties
      }
    }
  },
  // watch: {
  //   // 侦听发件人省份变化
  //   'ruleForm.receiverCityId'() {
  //     // 变化之后从所有数据中筛选与省份id对应的数据
  //     const data = this.Sprovinces.filter(item => {
  //       return item.areaId === this.ruleForm.senderProvinceId
  //     })
  //     console.log('data', data)// 点击天津获取到天市
  //     console.log(data[0].cities)
  //     // 把市区赋值 发件人城市列表
  //     this.Scitys = data[0].cities
  //   },
  //   // 侦听发件人城市变化
  //   'ruleForm.senderCityId'() {
  //     // 用一个变量接受数组返回符合条件的数组
  //     const data = this.Scitys.filter(item => {
  //       return item.areaId === this.ruleForm.senderCityId
  //     })
  //     console.log('data', data)// 点击天津获取到南开
  //     console.log(data[0].counties)
  //     this.Sareas = data[0].counties
  //   },
  //   // 侦听收件人省份变化
  //   'ruleForm.receiverProvinceId'() {
  //     // 变化之后从所有数据中筛选与省份id对应的数据
  //     const data = this.Rprovinces.filter(item => {
  //       return item.areaId === this.ruleForm.receiverProvinceId
  //     })
  //     console.log('data', data)// 点击天津获取到天市
  //     console.log(data[0].cities)
  //     // 把市区赋值 发件人城市列表
  //     this.Rcitys = data[0].cities
  //   },
  //   // 侦听收件人城市变化
  //   'ruleForm.receiverCityId'() {
  //     // 用一个变量接受数组返回符合条件的数组
  //     const data = this.Rcitys.filter(item => {
  //       return item.areaId === this.ruleForm.receiverCityId
  //     })
  //     console.log('data', data)// 点击天津获取到南开
  //     console.log(data[0].counties)
  //     this.Rareas = data[0].counties
  //   }

  // },
  created() {
    // this.Sprovinces = provinces
    // this.Rprovinces = provinces
    this.orderList()
    this.getdata()
  },
  methods: {
    // 获取城市省份数据
    getdata() {
      this.Sprovinces = city
      this.Rprovinces = city
      console.log('城市', this.Sprovinces)
    },
    // 渲染表格
    async orderList() {
      const res = await orderList(this.params)
      this.tableData = res.data.items
      console.log(this.tableData)
      this.total = +res.data.counts
    },
    // 每页信息显示条数
    handleSizeChange(val) {
      this.params.pageSize = val
      if (this.params.page === 1) {
        this.orderList(this.params)
      }
    },
    // 跳转到第几页
    handleCurrentChange (gitpage) {
      this.params.page = gitpage
      this.orderList()
    },
    jump(row) {
      // console.log(row)
      this.$router.push(`/business/edit-order/?id=${row.id}`)
    },
    // 重置表单
    reset() {
      this.ruleForm.value = ''
      this.ruleForm.payValue = ''
      this.$refs.ruleForm.resetFields()
    },
    // 搜索功能
    async search() {
      const res = await orderList({ ...this.ruleForm, ...this.params })
      this.tableData = res.data.items
    }
  }

}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}

// 下拉框
/deep/ .el-select {
  width: 100%;
}
</style>

<style lang="scss" scoped>
.order-list /deep/ .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}
</style>
